<script setup lang="ts">
  import { ref, onMounted } from 'vue';

  // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
  import * as echarts from 'echarts/core';
  import {
    TooltipComponent,
    TooltipComponentOption,
    LegendComponent,
    LegendComponentOption,
  } from 'echarts/components';
  import { PieChart, PieSeriesOption } from 'echarts/charts';
  import { LabelLayout } from 'echarts/features';
  import { CanvasRenderer } from 'echarts/renderers';

  echarts.use([
    TooltipComponent,
    LegendComponent,
    PieChart,
    CanvasRenderer,
    LabelLayout,
  ]);

  type EChartsOption = echarts.ComposeOption<
    TooltipComponentOption | LegendComponentOption | PieSeriesOption
  >;

  const option: EChartsOption = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
    },
    series: [
      // 黑色底
      {
        name: '风险',
        type: 'pie',
        radius: [0, '80%'],
        legendHoverLink: false,
        // 标签文字位置
        label: {
          width: 100,
          height: 30,
          lineHeight: 30,
          distanceToLabelLine: -80,
        },
        labelLine: {
          length: 30,
          length2: 100,
          lineStyle: {
            color: '#FFF',
          },
        },
        emphasis: {
          disabled: true,
        },
        labelLayout(params) {
          return {
            verticalAlign: 'bottom',
            align: 'center',
          };
        },
        itemStyle: {
          color: '#121516',
        },
        data: [
          { value: 14, name: '紧急' },
          { value: 44, name: '中危' },
          { value: 23, name: '低危' },
          { value: 18, name: '高危' },
        ],
      },
      // 条纹底
      {
        name: '风险',
        type: 'pie',
        radius: ['32%', '45%'],
        label: { show: false },
        itemStyle: {
          color: '#ef6567',
        },
        data: new Array(49).fill(2).map((num, index) => {
          const item: any = { value: num, itemStyle: { opacity: 0 } };
          if (index % 2 === 0) {
            item.itemStyle = { color: '#fff', opacity: 0.2 };
            item.value /= 4;
            return item;
          }
          return item;
        }),
      },
      // 数据环
      {
        name: '风险',
        type: 'pie',
        radius: ['48%', '70%'],
        label: { show: false },

        itemStyle: {
          color: function (colors) {
            var colorList = ['#ef6567', '#70D4FF', '#84FB58', '#FBBD58'];
            return colorList[colors.dataIndex];
          },
        },
        data: [
          { value: 14, name: '紧急' },
          { value: 44, name: '中危' },
          { value: 23, name: '低危' },
          { value: 18, name: '高危' },
        ],
      },
      // 中间圆点
      {
        name: '风险',
        type: 'pie',
        radius: ['0', '10%'],
        legendHoverLink: false,
        label: { show: false },
        labelLine: { show: false },
        emphasis: {
          disabled: true,
        },
        itemStyle: {
          color: function (colors) {
            var colorList = ['#ef6567'];
            return colorList[colors.dataIndex];
          },
        },
        data: [{ value: 14, name: '紧急' }],
      },
      // 中间小环
      {
        name: '风险',
        type: 'pie',
        radius: ['18%', '22%'],
        legendHoverLink: false,
        label: { show: false },
        labelLine: { show: false },
        emphasis: {
          disabled: true,
        },
        itemStyle: {
          color: function (colors) {
            var colorList = ['#ef6567', '#70D4FF', '#84FB58', '#FBBD58'];
            return colorList[colors.dataIndex];
          },
        },
        data: [
          { value: 14, name: '紧急' },
          {
            value: 44,
            name: '中危',
            itemStyle: { opacity: 0 },
          },
          {
            value: 23,
            name: '低危',
            itemStyle: { opacity: 0 },
          },
          {
            value: 18,
            name: '高危',
            itemStyle: { opacity: 0 },
          },
        ],
      },
      // 紧急扇形
      {
        name: '风险',
        type: 'pie',
        radius: ['30%', '80%'],
        legendHoverLink: false,
        label: { show: false },
        labelLine: { show: false },
        emphasis: {
          disabled: true,
        },
        itemStyle: {
          color: function (colors) {
            var colorList = ['#ef6567', '#70D4FF', '#84FB58', '#FBBD58'];
            return colorList[colors.dataIndex];
          },
        },
        data: [
          { value: 14, name: '紧急' },
          {
            value: 44,
            name: '中危',
            itemStyle: { opacity: 0 },
          },
          {
            value: 23,
            name: '低危',
            itemStyle: { opacity: 0 },
          },
          {
            value: 18,
            name: '高危',
            itemStyle: { opacity: 0 },
          },
        ],
      },
    ],
  };

  console.log(option);

  defineProps<{ msg: string }>();

  let myChart = null;

  onMounted(() => {
    const myEcharts = document.getElementById('myEcharts');
    if (myEcharts) {
      myChart = echarts.init(myEcharts);
      myChart.setOption(option);
    }
  });
</script>

<template>
  <div id="myEcharts"></div>
</template>

<style scoped>
  #myEcharts {
    width: 800px;
    height: 400px;
  }
</style>
